<template>
	<view class="u-padding-left-32 u-padding-right-32" :class="currentTheme">
		<a-nabbar :name="title"/>
		<mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback">
			<view class="u-margin-top-54">
				<item-box padding="39">
					<view class="u-flex">
						<item-image type="1" size="120" :img="loginForm.avatar"></item-image>
						<view class="u-margin-left-28">
							<view class="box-title text-bold u-font-36">{{loginForm.nickname}}</view>
							<view class="u-font-24 text-color-txtTheme u-margin-top-28">
								{{platform=='player' ? '新本无人晓？邀玩家，玩新本。' : '邀请店家成功入驻，即可返利！'}}
							</view>
						</view>
					</view>
					<view class="u-padding-left-60 u-padding-right-60 u-margin-bottom-30">
						<view class="qrcode-box">
							<Qrcode
								ref="qrcode"
								:val="QRValue"
								:size="490"
								:showLoading="false" />
						</view>
						<item-btn  @click="saveCode" width="100%" height="88">
							<text class="u-font-28 text-white">保存二维码到相册</text>
						</item-btn>
						<view class="u-margin-top-64 u-flex u-row-between">
							<view class=" u-font-28 u-padding-right-30 u-flex-1">
								<text class="content-desc-item">链接：</text><text class="text-color-765CFE">{{url}}</text>
							</view>
							<item-btn  @click="copy" width="186" height="88" type="plain"><text class="u-font-28 text-color-1a">复制</text></item-btn>
						</view>
					</view>
				</item-box>
			</view>
			<view class="share-list box-title  text-bold u-font-32 u-margin-top-20 u-margin-bottom-20">
				已邀请{{platform=='player' ? '玩家' : '入驻店家'}}：
			</view>
			<view v-if="dataList.length" class="u-padding-bottom-30">
				<view v-if="platform=='player'">
					<view  v-for="(item,index) in dataList" :key="index" class="u-margin-top-20">
						<item-box :padding="0">
							<userHeader :form="item" />
							<!-- <list-item v-else :item="{image:item.avatar,name:item.nickname,storeType:item.preferenceNames}" :isShare="false" height="180" width="180">
								<view slot="content"></view>
								<view slot="footer"></view>
							</list-item> -->
						</item-box>
					</view>
				</view>
				<item-box v-else padding="32">
					<view class="u-flex u-flex-wrap">
						<view  v-for="(item,index) in showDataList" :key="index" class="u-margin-bottom-40 user-box u-flex u-row-center u-flex-col">
							<item-image :img="item.avatar" size="86" type="1"></item-image>
							<view class="u-font-20 u-line-1 u-text-center nickname u-margin-top-10">{{item.nickname}}</view>
						</view>
						<view  class="u-margin-bottom-40 user-box u-flex u-row-center u-flex-col" v-if="dataList.length>14" @click="toggleDataList">
							<view class="more u-flex u-row-center">
								<u-icon name="gengduo" custom-prefix="index-custom-icon" :color="currentThemeObj.primary"></u-icon>
							</view>
							<view class="u-font-20 u-line-1 u-text-center text-color-txtTheme u-margin-top-10">查看更多</view>
						</view>
					</view>
				</item-box>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import Qrcode from 'tki-qrcode/components/tki-qrcode/tki-qrcode.vue'
	import {getDetail} from '@/api/crud.js'
	import {shareName} from '@/utils/config'
	export default {
		mixins:[upCallback],
		components: {
			Qrcode
		},
		data() {
			return {
				option:{},
				apiModule:'shopApi',
				apiType:'user',
				name:'inviteList',
				icon:'',
				url:`https://${shareName}.giblyworld.com`,
				inviteUid:'',
				form:{
					isShow:1,
					uid:null,
					userType:null
				},
				showMore:false
			};
		},
		computed: {
			title() {
				return this.option.label 
			},
			platform(){
				return this.loginForm.userType==='issue' ? 'manage' : 'player'
			},
			QRValue(){
				return `${this.url}/share.html?q=${this.inviteUid}&platform=${this.platform}`
			},
			showDataList(){
				return this.showMore ? this.dataList : this.dataList.slice(0,14)
			}
		},
		onLoad(option) {
			this.option = option
			getDetail('','user',this.apiModule,'getUserInviteQR').then(res=>{
				this.inviteUid = res;
				this.$nextTick(()=>{
					this.$refs.qrcode._makeCode()
				})
				this.form.inviteUid = this.loginForm.uid
				this.form.inviteUserType = this.loginForm.userType
				this.downCallback();
			})
		},
		methods: {
			saveCode() {
				this.$refs.qrcode._saveCode()
			},
			copy(){
				uni.setClipboardData({
					data: `别犹豫！加入我的粉丝团！就现在！${this.QRValue}`,
					success:()=>{
						this.$u.toast('复制成功')
					}
				});
			},
			toggleDataList(){
				this.showMore = !this.showMore
			}
		},
	}
</script>

<style lang="scss" scoped>
.qrcode-box{
	margin: 53rpx auto;
}
.light{
	.text-color-1a{
		color:  var(--title-color);;
	}
}
.user-box{
	flex: 0 0 20%;
	.nickname{
		width: 114rpx;
	}
}
.more{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 1rpx solid var(--theme-color);
}
</style>
